<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebGL Point Example</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      canvas {
        margin: 50px auto 0;
        display: block;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
      const canvas = document.getElementById('canvas')
      const gl = canvas.getContext('webgl')

      if (!gl) {
        alert('WebGL not supported in this browser')
        throw new Error('WebGL not supported')
      }
      // 修正顶点着色器源码
      const vsSource = `
        attribute vec4 aPosition;
        void main() {
          gl_Position = aPosition;
          gl_PointSize = 10.0;
        }
      `
      // 片元着色器
      const fsSource = `
      precision mediump float;
      uniform vec2 uColor;
        void main() {
          gl_FragColor = vec4(uColor.r, uColor.g, 0.0, 1.0);
        }
      `

      // initShader函数实现
      function initShader(gl, vsSource, fsSource) {
        function compileShader(type, source) {
          const shader = gl.createShader(type)
          gl.shaderSource(shader, source)
          gl.compileShader(shader)
          if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            console.error('An error occurred compiling the shaders:', gl.getShaderInfoLog(shader))
            gl.deleteShader(shader)
            return null
          }
          return shader
        }

        const vertexShader = compileShader(gl.VERTEX_SHADER, vsSource)
        const fragmentShader = compileShader(gl.FRAGMENT_SHADER, fsSource)
        const shaderProgram = gl.createProgram()
        gl.attachShader(shaderProgram, vertexShader)
        gl.attachShader(shaderProgram, fragmentShader)
        gl.linkProgram(shaderProgram)

        if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
          console.error('Unable to initialize the shader program:', gl.getProgramInfoLog(shaderProgram))
          return null
        }

        return shaderProgram
      }

      const program = initShader(gl, vsSource, fsSource)
      const uColor = gl.getUniformLocation(program, 'uColor')

      gl.useProgram(program)

      const aPosition = gl.getAttribLocation(program, 'aPosition')
      const points = []
      canvas.onclick = function (ev) {
        const x = ev.clientX
        const y = ev.clientY
        const domPosition = ev.target.getBoundingClientRect()
        console.log(domPosition, canvas.offsetTop, canvas.offsetLeft)
        const domx = x - domPosition.left
        const domy = y - domPosition.top
        const halfWidth = canvas.offsetWidth / 2
        const halfHeight = canvas.offsetHeight / 2
        const clickX = (domx - halfWidth) / halfWidth
        const clickY = (halfHeight - domy) / halfHeight
        console.log(clickX, clickY)
        points.push({
          clickX,
          clickY
        })
        for (let i = 0; i < points.length; i++) {
          gl.vertexAttrib2f(aPosition, points[i].clickX, points[i].clickY)
          gl.uniform2f(uColor, points[i].clickX, points[i].clickY)
          // gl.clear(gl.COLOR_BUFFER_BIT)
          gl.drawArrays(gl.POINTS, 0, 1)
        }
      }
    </script>
  </body>
</html>
